<template>
  <div class="login_wrap">
    <div class="ocr_wrap">
      <!-- <img src="../assets/ocr.png" alt="" width="590px" height="200px" /> -->
    </div>
        <el-button type="text" icon="el-icon-arrow-left" class="exit" size="mini" @click="gotoBack">返回</el-button>

    <div class="title_wrap">任务单自动识别系统</div>
    <div class="wrap">
      <div class="showModel" @click="gotoExample">查看操作票模板</div><br>
      <el-cascader :options="options" clearable class="cascader" @change="handleAddressFun" ref="cascaderAddr"></el-cascader
      ><br />
      <div class="inputGroup">
        <div class="title">输入关键字1和关键字2</div>
        <el-input placeholder="请输入关键字1" v-model="input1" clearable @input="handleInputValue" class="input1">
          <template slot="prepend">关键字1</template>
        </el-input><br>
        <el-input placeholder="请输入关键字2" v-model="input2" clearable @input="handleInputValue2" class="input2">
          <template slot="prepend">关键字2</template>
        </el-input>
      </div>
      <div class="example">
      </div>

      <form class="inputFile" enctype="multipart/form-data">
        <input
          type="file"
          id="files"
          @change="getFile($event)"
          ref="uploadFile"
        />
        点击选择文件
      </form>
      <div class="fileName" v-if="fileName !== ''">
        已选择：{{ fileName }} 文件
      </div>
      <div class="fileName" v-if="fileName == ''">此处显示已选择的文件名</div>
      <div class="btn" @click="sendFile">提交</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      input1: "",
      input2: "",
      fileName: "",
      cascaderValue: '',
      linkage1: '',
      linkage2: '',
      linkage3: '',
      fileList: [],
      shows:false,
      options: [
        {
          value: "二次保护",
          label: "二次保护",
          children: [
            {
              value: "10千伏出线",
              label: "10千伏出线",
              children: [
                {
                  value: "停用",
                  label: "停用",
                },
                {
                  value: "用上",
                  label: "用上",
                }
              ]
            },
            {
              value: "10千伏自切",
              label: "10千伏自切",
              children: [
                {
                  value: "停用",
                  label: "停用",
                },
                {
                  value: "用上",
                  label: "用上",
                }
              ]
            },
            {
              value: "35千伏出线",
              label: "35千伏出线",
              children: [
                {
                  value: "停用",
                  label: "停用",
                },
                {
                  value: "用上",
                  label: "用上",
                }
              ]
            },
            {
              value: "35千伏进线",
              label: "35千伏进线",
              children: [
                {
                  value: "停用",
                  label: "停用",
                },
                {
                  value: "用上",
                  label: "用上",
                }
              ]
            },
            {
              value: "电容器",
              label: "电容器",
              children: [
                {
                  value: "停用",
                  label: "停用",
                },
                {
                  value: "用上",
                  label: "用上",
                }
              ]
            },
            {
              value: "站用变",
              label: "站用变",
            },
            {
              value: "主变",
              label: "主变",
              children: [
                {
                  value: "停用",
                  label: "停用",
                },
                {
                  value: "用上",
                  label: "用上",
                }
              ]
            },
            {
              value: "主变35千伏",
              label: "主变35千伏",
              children: [
                {
                  value: "停用",
                  label: "停用",
                },
                {
                  value: "用上",
                  label: "用上",
                }
              ]
            },
          ],
        },
        {
          value: "命令",
          label: "命令",
          children: [
            {
              value: "2号主变10千伏引线插头",
              label: "2号主变10千伏引线插头",
            },
            {
              value: "10千伏接地电阻",
              label: "10千伏接地电阻",
            },
            {
              value: "VQC",
              label: "VQC",
            },
            {
              value: "分段引线插头",
              label: "分段引线插头",
            },
            {
              value: "检查电流",
              label: "检查电流",
            },
            {
              value: "检查开关",
              label: "检查开关",
            },
            {
              value: "压变联络小开关",
              label: "压变联络小开关",
            },
            {
              value: "压变中性点接地闸刀",
              label: "压变中性点接地闸刀",
            },
            {
              value: "站用变",
              label: "站用变",
            },
            {
              value: "主变有载",
              label: "主变有载",
            },
            {
              value: "主变中性套管",
              label: "主变中性套管",
            },
          ]
        }, 
        {
          label: '其他',
          value: '其他',
          children: [
            {
              value: "开关自动---非自动",
              label: "开关自动---非自动",
            },
            {
              value: "遥控开关",
              label: "遥控开关",
            }
          ]
        }
      ]
    }
  },
  methods: {
    getFile(event) {
      let fileList = event.target.files
      this.fileList = Array.prototype.slice.call(fileList)
      this.fileName = this.fileList.length
      this.fileName = this.fileList[0].name
    },
    sendFile() {
      if(this.input1=='' || this.linkage3 == undefined || this.fileList.length == 0) {
        this.$message({
          type:'error',
          message:'请选择要添加的操作项'
        })
        return
      }
      this.shows = true //点击开始识别后进行loading等待
       
      let formData = new FormData()
      for (var i = 0; i <this.fileList.length; i++) {
        formData.append("file", this.fileList[i]);
      }
      formData.append('linkage1', this.linkage1)
      formData.append('linkage2', this.linkage2)
      formData.append('linkage3', this.linkage3)

      formData.append('key1', this.input1)
      formData.append('key2', this.input2)

      this.axios({
        url: "/updateSpecialCzpMod",
        method: "post",
        data: formData
      })
      .then((res) => {
        console.log(res)
        if(res.data){//如果成功则跳转 
          this.shows = false //识别有结果后结束loading等待
          this.$message({
            type:'success',
            message:'新增操作项成功'
          })
          setTimeout(()=> {
            this.$router.push('/')
          }, 1000)
        } else {
          this.$message({
            type:'warning',
            message:'识别失败，请重新尝试...'
          })
        }
      })
      .catch(e=>{
        console.log(e)
      })
    },
    		// 三级地址选择
		handleAddressFun(e){
      let arr = []
      e.forEach(item => {
        arr.push(item)
      })
      console.log(arr)
      if(!arr[2]) {
        this.linkage1 = arr[0]
        this.linkage2 = arr[1]
        this.linkage3 = ''
      } else if (arr[2]) {
        this.linkage1 = arr[0]
        this.linkage2 = arr[1]
        this.linkage3 = arr[2]
      } else {
        return
      }
    },
    handleInputValue(e) {
      this.input1 = e
    },
    handleInputValue2(e) {
      this.input2 = e
    },
    gotoExample() {
      this.$router.push('/example')
    },
    gotoBack() {
      this.$router.push('/addIndex')
      
    }
  }
};
</script>

<style lang="scss" scoped>
.exit {
  text-align: center;
    margin-top: 20px;
    margin-left: 30px;
    font-size:16px;
}
.login_wrap {
  color: #fff;
  background: url("../assets/bg.png") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: fixed;
  margin-top: -8px;
  margin-left: -8px;
  // .ocr_wrap {
  //   padding-top: 100px;
  //   margin-left: 100px;
  // }
  .title_wrap {
    color: white;
    font-size: 60px;
    font-weight: 600;
    margin-top: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .wrap {
    position: absolute;
    margin-top: 300px;
    left: 50%;
    transform: translateX(-50%);
    .showModel {
      font-size: 14px;
      text-decoration: none;
      color: rgb(56, 134, 197);

      margin-bottom: 40px;
      position: absolute;
      cursor: pointer;
    }
    .cascader {
      margin-top: 20px;
      width: 600px;
    }
    .inputGroup {
      // border: 1px solid #fff;
    }
    .title {
      color: #ccc;
      font-size: 16px;
      margin-top: 40px;
      margin-bottom: 10px;
    }
    .input1 {
      width: 600px;
    }
    .input2 {
      width: 600px;
      margin-top: 15px;
    }
    .example {
      margin-top: 5px;
      color: #999;
      font-size: 13px;
    }
    .inputFile {
      padding: 6px 0;
      text-align: center;
      cursor: pointer;
      color: #333;
      background: #f5f5f5;
      border-radius: 4px;
      overflow: hidden;
      display: inline-block;
      font-size: 17px;
      margin-top: 40px;
      width: 600px;
    }
    .inputFile input {
      opacity: 0;
      cursor: pointer;
      position: absolute;
    }
    .inputFile:hover {
      color: #fff;
      background: #00a9ff;
      text-decoration: none;
    }
    .fileName {
      color: white;
      margin-top: 40px;
      border: 1px solid #666;
      width: 340px;
      line-height: 40px;
      padding-left: 10px;
      font-size: 15px;
      border-radius: 2px;
      background: #666;
    }
    .btn {
      color: #333;
      background: #f5f5f5;
      text-align: center;
      display: inline-block;
      border-radius: 4px;
      margin-top: 40px;
      cursor: pointer;
      font-size: 17px;
      width: 600px;
      padding: 6px 0;
    }
    .btn:hover {
      color: #fff;
      background: #00a9ff;
      text-decoration: none;
    }
  }
}
</style>
